<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" href="../Elementos/estilos/ddsmoothmenu3.css" type="text/css" />
        <link rel="stylesheet" href="../Elementos/estilos/ddsmoothmenu-v.css" type="text/css" />
        <!--  <script type="text/javascript" src="../Elementos/js/mootools.js"></script>
      <script type="text/javascript" src="../Elementos/js/caption.js"></script>
      -->  <script type="text/javascript" src="../Elementos/js/jquery.min.js"></script>
     
        <script type="text/javascript" src="../Elementos/js/ddsmoothmenu.js"></script>
        <link rel="stylesheet" href="../Elementos/estilos/main.css" type="text/css" />
        <link rel="stylesheet" href="../Elementos/estilos/main.css" type="text/css" />
        
        <title></title>
            
  <!--       <script src="../Elementos/otro/jquery_1.js" type="text/javascript" language="javascript"></script>
--><script language="javascript">
            //  Developed by Roshan Bhattarai 
            //  Visit http://roshanbh.com.np for this script and more.
            //  This notice MUST stay intact for legal use
    
            $(document).ready(function()
            {
                $("#login_form").submit(function()
                {
                    //remove all the class add the messagebox classes and start fading
                    $("#msgbox").removeClass().addClass('messagebox').text('Validando....').fadeIn(1000);
                    //check the username exists or not from ajax
                    $.post("../Controller/CtrLogin.php?login",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
                    {
                       alert(data);
                        var arrayData= data.split("|-|");
                      // alert("-> log"+data);
                        
                        if(arrayData[1]=='ok')
                        {
                            $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
                            { 
                                //add message and change the class of the box and start fading
                                $(this).html('Logueando.....').addClass('messageboxok').fadeTo(900,1,
                                function()
                                { 
                                    if(arrayData[2]=="1"){
//                                    //redirect to secure page
                                       document.location='FormInicialAdministrador.php';
                                    }else if (arrayData[2]=="2"){
                                        document.location='FormInicialUsuario.php';
                                    }else{
                                        document.location='../View/index.php'; 
                                    }
                                });
                        
                            });
                        }
                        else 
                        {
                            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
                            { 
                                //add message and change the class of the box and start fading
                                $(this).html('El logueo, fallo... No existe!').addClass('messageboxerror').fadeTo(900,1);
                            });		
                        }
                
                    });
                    return false; //not to post the  form physically
                });
                //now call the ajax also focus move from 
                $("#password").blur(function()
                {
                    $("#login_form").trigger('submit');
                });
            });
        </script>
        <style type="text/css">
            body {
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:11px;
            }
            .top {
                margin-bottom: 15px;
            }
            .buttondiv {
                margin-top: 10px;
            }
            .messagebox{
                position:absolute;
                width:100px;
                margin-left:30px;
                border:1px solid #c93;
                background:#ffc;
                padding:3px;
            }
            .messageboxok{
                position:absolute;
                width:auto;
                margin-left:30px;
                border:1px solid #349534;
                background:#C9FFCA;
                padding:3px;
                font-weight:bold;
                color:#008000;

            }
            .messageboxerror{
                position:absolute;
                width:auto;
                margin-left:30px;
                border:1px solid #CC0000;
                background:#F7CBCA;
                padding:3px;
                font-weight:bold;
                color:#CC0000;
            }

        </style>
    </head>
    <body>
        <br>
        <br>
        <form method="post" action="" id="login_form">
            <div align="center">
                <div class="top" > <strong style="color:#FF0000">Login</strong></div>
    
                <div >
                    User Name : <input name="username" type="text" id="username" value="" maxlength="20" />
       
                </div>
                <div style="margin-top:5px" >
                    Password :
                    &nbsp;&nbsp;
                    <input name="password" type="password" id="password" value="" maxlength="20" />
        
                </div>
                <div class="buttondiv">
                    <input name="Submit" type="submit" id="submit" value="Login" style="margin-left:-10px; height:23px"  /> <span id="msgbox" style="display:none"></span>
        
                </div>
    
            </div>
        </form>
    </body>
</html>
